<template>
	<view class="article-list">
		<view class="header">
			<text class="title">{{params.title}}</text>
			<text class="more" @click="goToMoreLink()">查看更多</text>
		</view>
		<view class="list" :class="params.rank == 1 ? 'rank1':'rank0'">
			<view class="item" v-for="(item,index) in params.list" :key="index" @click="goToDetailLink(item.id)">
				<view class="content">
					<view class="info">
						<view class="title text-ellipsis-2">{{item.title}}</view>
						<view class="cont">
							<view class="exp-info">
								<view class="category">
									<text>{{item.category.title}}</text>
								</view>
								<view class="info">
									<view class="item view">
										<uni-icons type="eye" size="10" color="#999999"></uni-icons> 
										<text class="num">{{item.handling_view}}</text>
									</view>
									<view class="item support">
										<uni-icons type="star" size="10" color="#999999"></uni-icons> 
										<text class="num">{{item.support}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cover">
						<image mode="widthFix" :src="item.cover_400" @error="imageError" class="image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ArticleList',
		props: {
			title: {
				type: String,
				default: '文章列表'
			},
			type: {
				type: String,
				default: 'article_list',
			},
			params: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				linkMoreParams: {},
			}
		},
		created() {
			//console.log(JSON.stringify(this.params))
			this.getLinkMoreParams()
		},
		methods: {
			/**
			 * 获取链接参数
			 */
			getLinkMoreParams: function(){
				let linkMoreParams = {
					category_id : this.params.category_id,
					order_field : this.params.order_field,
					order_type: this.params.order_type,
				}
				//console.log(linkParams);
				this.linkMoreParams = linkMoreParams
			},
			/**
			 * 路由至页面
			 */
			goToMoreLink: function(){
				let params = this.linkMoreParams
				let urlParams = this.util.urlEncode(params)
				let url = '../article/lists?' + urlParams
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			goToDetailLink: function(id){
				let urlParams = 'id='+id
				let url = '../article/detail?' + urlParams
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
		}
	}
</script>

<style lang="scss">
	.article-list {
		margin: 10rpx;
		.header {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			margin: 10rpx 0 0 0;
			.title {
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color: #000;
			}
			.more {
				color: #999;
				font-size: 24rpx;
				line-height: 44rpx;
			}
		}

		/*竖排*/
		.list {
			.item {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.content {
					padding: 10rpx;
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.cover {
						width: 280rpx;
						border-radius: 10rpx;
						overflow: hidden;
						.image {
							width: 100%;
							display: block;
						}
					}
					.info {
						position: relative;
						flex: 1;
						margin-right: 20rpx;
						
						.title {
							font-size: 30rpx;
							color: #000;
							font-weight: 600;
							height: 72rpx;
							line-height: 36rpx;
						}
						.cont {
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							.exp-info {
								display: flex;
								flex-wrap: wrap;
								margin-top: 10rpx;
								color: #999;
								font-size: 24rpx;
								.category {
									flex: 1;
								}
								.info {
									flex: 1;
									text-align: right;
									.item {
										display: inline;
										.num {
											margin: 0 10rpx;
										}
									}
								}
								
							}
						}
						
					}
				}
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		
	}
</style>
